<template>
    <view class="contacter bg-[#FFF] rounded-[16rpx] px-[30rpx]">
        <view class="CTop" @click="goDetail">
            <view class="orderNumber">订单编号: {{item.orderSn}}</view>
            <view class="orderStatus" v-if="item.status == 101">{{ statusText }}</view>
            <view class="orderStatus" style="color:#333333" v-else>{{ statusText }}</view>
        </view>
        <up-line></up-line>
        <view class="CBottom">
            <view class="CB-Top" v-if="item.orderPageVoList.length<2">
                <image :src="item.orderPageVoList[0]?.pic" mode="scaleToFill"/>
                <view class="CBT-Right">
                    <view class="CBTR-Left">
                        <view class="CBTRL-Top">
                            <view class="priceName">{{ item.orderPageVoList[0]?.name }}</view>
                            <view class="specification">规格:
                                <text style="font-weight: 400;font-size: 24rpx;color: #666666;margin-right: 10rpx;" v-for="(it,el) in item.orderPageVoList[0]?.features" :key="el">{{it}}</text>
                            </view>
                        </view>
                        <view class="CBTL-Bottom">
                            <view class="type" v-for="(it,el) in item.orderPageVoList[0]?.features" :key="el">{{ it }}</view>
                        </view>
                    </view>
                    <view class="CBTR-Right">
                        <priceNumber :price="item.orderPageVoList[0]?.price"></priceNumber>
                        <view>×{{ item.orderPageVoList[0]?.num }}</view>
                    </view>
                </view>
            </view>
            <view class="CBTOP" v-else>
                <view class="CBT-Left">
                    <scroll-view class="scroll-view_H" :scroll-x="true">
					    <view class="scroll-view-item_H" v-for="(it,index) in item.orderPageVoList" :key="index">
                            <view class="Item">
                                <image :src="it.pic" mode="scaleToFill"/>
                                <view class="productName">{{ it.name }}</view>
                            </view>
                        </view>
				    </scroll-view>
                </view>
                <view class="CBT-Right">
                    <priceNumber :price="item.payPrice" ></priceNumber>
                    <view class="number">共{{countAll}}件</view>
                </view>
            </view>
            <view class="CB-Bottom">
                <view class="CBB-Top">创建: {{ item.createTime }}</view>
                <view class="CBB-Bottom" >
                    <view class="CancelOrder" v-if="item.status == 101 || item.status == 103"  @click="cancelOrder">取消订单</view> 
                    <view class="ContinuationPayment" v-if="item.status == 101" @click="GetContinue">继续付款</view>
                    <view class="GoComment" v-if="item.status == 401" @click="goComment">去评论</view>
                    <view class="ConfirmReceipt" v-if="item.status == 301 && item.deliveryType == 2" @click="confirmReceipt">确认签收</view>
                    <view class="ConfirmReceipt" v-if="item.status == 301 && (item.deliveryType == 0 || item.deliveryType == 1)" @click="confirmReceipt">出示二维码</view> 
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { test } from '@/uni_modules/uview-plus';
import { timeFrom } from '@/uni_modules/uview-plus';
import env from '@/config/common.js'
import { computed, onMounted, ref } from 'vue';
import priceNumber from '@/components/priceNumber'
let baseUrl = env.API_BASE_URL_DEV
const props = defineProps({
    item:{
        type:Object,
        default:()=>{}
    }
})
const emit = defineEmits(['detail','cancel','confirm','continues','comment'])
const statusText = computed(()=>{
    switch(props.item.status){
        case 101:
            return '待支付'
        case 102:
            return '已过期'
        case 103:
            return '支付中'
        case 201:
            return '待发货'
        case 301:
            return '待收货'
        case 401:
            return '待评价'
        case 501:
            return '已完成'
        case 502:
            return '退款中'
        case 503:
            return '退款成功'
        case 504:
            return '退款失败'
    }
})
const countAll = computed(()=>{
    let value = 0
    props.item.orderPageVoList.reduce((pro,it)=>{
        return value += it.num
    },0)
    return value
})
function goDetail(){
    console.log('asdasdasdasd');
    emit('detail',props.item.orderId)
}
function cancelOrder(){
    emit('cancel',props.item.orderId)
}
function confirmReceipt(){
    emit('confirm',props.item.orderId)
}
function GetContinue(){
    emit('continues',props.item)
}
function goComment(){
    emit('comment',props.item.orderId)
}
onMounted(()=>{
    props.item.orderPageVoList = props.item.orderPageVoList.map(it=>{
        if(test.url(it.pic)){
            
        }else{
            it.pic = baseUrl + it.pic
        }
        return it
    })
})
</script>

<style lang="scss" scoped>
.contacter{
    padding:  0 30rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    .CTop{
        display: flex;
        padding: 30rpx 0;
        justify-content: space-between;
        .orderNumber{
            color: #666;
            font-size: 26rpx;
            font-weight: 400;
        }
        .orderStatus{
            color: #f00;
            font-size: 26rpx;
            font-weight: 400;
        }
    }
    .CBTOP{
        position: relative;
        .CBT-Left{
            width: 494rpx;
            height: 234rpx;
            .scroll-view_H{
                width: 494rpx;
		        white-space: nowrap;
                .scroll-view-item_H {
		            display: inline-block;
                    margin-right: 20rpx;
                    .Item{
                        width: 136rpx;
                        padding: 30rpx 0 0;
                        image{
                            width: 136rpx;
                            height:136rpx;
                            display: block;
                            margin-bottom: 8rpx;
                        }
                        .productName{       
                            width: 136rpx;
                            font-weight: 400;
                            font-size: 22rpx;
                            color: #666666;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
	            }
            }
        }
        .CBT-Right{
            top:0;
            right:0;
            display: flex;
            width: 166rpx;
            height: 232rpx;
            position: absolute;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            background-color: #fff;
            .number{
                margin-top: 4rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
            }
        }
    }
    .CBottom{
        padding: 30rpx 0;
        .CB-Top{
            display: flex;
            margin-bottom: 30rpx;
            image{
                width: 136rpx;
                height: 136rpx;
                display: block;
            }
            .CBT-Right{
                display: flex;
                flex: 1;
                justify-content: space-between;
                margin-left: 24rpx;
                .CBTR-Left{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .CBTRL-Top{
                        .priceName{
                            font-weight: 400;
                            font-size: 30rpx;
                            color: #111111;
                            margin-bottom: 4rpx;
                        }
                        .specification{
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #666666;
                        }
                    }
                    .CBTL-Bottom{
                        display: flex;
                        align-items: center;
                        .type{
                            font-weight: 400;
                            font-size: 18rpx;
                            color: #FF4D1B;
                            margin-right: 8rpx;
                            width: fit-content;
                            padding: 4rpx 10rpx;
                            border: 1rpx solid #CCCCCC;
                        }
                    }
                }
                .CBTR-Right{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: center;
                }
            }
        }
        .CB-Bottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .CBB-Top{
                font-weight: 400;
                font-size: 22rpx;
                color: #333333;
            }
            .CBB-Bottom{
                display: flex;
                .CancelOrder{
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #333333;
                    margin-right: 12rpx;
                    padding: 16rpx 28rpx;
                    border-radius: 33rpx;
                    border: 1rpx solid #E5E5E5;
                }
                .ContinuationPayment{
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #FF0000;
                    padding: 16rpx 28rpx;
                    border-radius: 33rpx;
                    border: 1rpx solid #FF0000;
                }
                .GoComment{
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #FF4D1B;
                    padding: 16rpx 28rpx;
                    border-radius: 33rpx;
                    border: 1rpx solid #FF4D1B;
                }
                .ConfirmReceipt{
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #FF4D1B;
                    padding: 16rpx 28rpx;
                    border-radius: 33rpx;
                    border: 1rpx solid #FF4D1B;
                }
            }
        }
    }
}
</style>